<!--edit-->
<template>
  <div class="edit_box">
    <el-form :model="orderForm" size="small">
      <div
        class="inline_flex"
        v-for="(item, index) in orderForm.fromList"
        :key="item.uuid"
      >
        <svg-icon
          iconClass="zyh_location_marker"
          className="green_clr margtp6"
        ></svg-icon>
        <el-form-item class="inline_box" style="width: 170px">
          <el-input v-model="item.deliver" placeholder="发货地" />
        </el-form-item>
        <el-form-item class="inline_box" style="width: 230px; flex: 1">
          <el-input v-model="item.address" placeholder="请输入装货详细地址" />
        </el-form-item>
        <el-form-item class="inline_box" style="width: 200px">
          <el-input v-model="item.linkman" placeholder="联系人及联系方式" />
        </el-form-item>
        <div class="svg_group">
          <span @click="delFromItem(index)" v-if="index !== 0">
            <svg-icon iconClass="zyh_del" className="red_clr"></svg-icon>
          </span>
          <span
            @click="plusFromItem"
            v-if="index == orderForm.fromList.length - 1"
          >
            <svg-icon iconClass="zyh_add" className="blue_clr"></svg-icon>
          </span>
        </div>
      </div>
      <div class="red_clr distance">距离：约50.6公里</div>
      <div
        class="inline_flex"
        v-for="(item, index) in orderForm.toList"
        :key="item.uuid"
      >
        <svg-icon
          iconClass="zyh_location_marker"
          className="red_clr margtp6"
        ></svg-icon>
        <el-form-item class="inline_box" style="width: 170px">
          <el-input v-model="item.deliver" placeholder="发货地" />
        </el-form-item>
        <el-form-item class="inline_box" style="width: 230px; flex: 1">
          <el-input v-model="item.address" placeholder="请输入装货详细地址" />
        </el-form-item>
        <el-form-item class="inline_box" style="width: 200px">
          <el-input v-model="item.linkman" placeholder="联系人及联系方式" />
        </el-form-item>
        <div class="svg_group">
          <span @click="delToItem(index)" v-if="index !== 0">
            <svg-icon iconClass="zyh_del" className="red_clr"></svg-icon>
          </span>
          <span @click="plusToItem" v-if="index == orderForm.toList.length - 1">
            <svg-icon iconClass="zyh_add" className="blue_clr"></svg-icon>
          </span>
        </div>
      </div>
      <div class="inline_flex">
        <el-form-item class="inline_box" style="width: 191px">
          <el-input placeholder="货物信息" />
        </el-form-item>
        <el-form-item class="inline_box" style="flex: 1">
          <el-input placeholder="车辆信息" />
        </el-form-item>
      </div>
      <div class="inline_flex">
        <el-form-item class="inline_box">
          <p class="inline_txt">历史运费：2500，预算费用：2400</p>
        </el-form-item>
        <el-form-item class="inline_box" style="width: 180px">
          <el-input placeholder="客户报价">
            <template slot="prepend">客户￥</template>
          </el-input>
        </el-form-item>
        <el-form-item class="inline_box" style="width: 150px">
          <el-select v-model="orderForm.price" placeholder="请选择">
            <el-option
              v-for="(item, index) in priceTradingList"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="inline_box" label="计划处理" style="flex: 1">
          <el-date-picker
            v-model="orderForm.value1"
            type="datetime"
            prefix-icon="el-icon-date"
            placeholder="选择日期时间"
            style="width: 185px"
          >
            <template slot="prepend">计划处理</template>
          </el-date-picker>
        </el-form-item>
      </div>
      <div class="inline_flex">
        <el-form-item class="inline_box" style="width: 130px">
          <el-select v-model="orderForm.deliver" placeholder="请选择">
            <el-option
              v-for="(item, index) in deliverSpeed"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="inline_box" style="flex: 1">
          <el-input placeholder="备注" />
        </el-form-item>
      </div>
      <div class="border">
        <div class="line_dashed"></div>
        <div class="inline_flex cont">
          <div class="lk_icon green_bgc">车</div>
          <div class="input_group">
            <div class="inline_flex">
              <el-form-item class="inline_box" style="flex: 1">
                <el-input v-model="orderForm.name" placeholder="姓名" />
              </el-form-item>
              <el-form-item class="inline_box" style="flex: 1">
                <el-input placeholder="身份证号" />
              </el-form-item>
              <el-form-item class="inline_box" style="flex: 1">
                <el-input placeholder="电话" />
              </el-form-item>
            </div>
            <div class="inline_flex">
              <el-form-item class="inline_box" style="flex: 1">
                <el-input placeholder="车牌" />
              </el-form-item>
              <el-form-item class="inline_box" style="flex: 1">
                <el-input placeholder="驾驶证号" />
              </el-form-item>
              <el-form-item class="inline_box" style="flex: 1">
                <el-input placeholder="车型" />
              </el-form-item>
            </div>
          </div>
          <div class="img_upload_box">
            <SinglePict />
          </div>
        </div>
        <div class="line_dashed"></div>
      </div>
      <div style="padding: 12px 0">
        <el-form-item
          class="inline_box"
          label="运费"
          label-width="60px"
          style="width: 200px"
        >
          <el-input placeholder="运费">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item
          class="inline_box"
          label="信息支付"
          label-width="70px"
          style="width: 220px"
        >
          <el-input placeholder="信息支付">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </div>
      <div class="btn_group">
        <el-button type="primary" size="small" @click="onSubmit"
          >确定</el-button
        >
        <el-button type="default" size="small" @click="onCancle"
          >取消</el-button
        >
      </div>
    </el-form>
  </div>
</template>
<script>
import { priceTradingTogether, deliverSpeed } from '@/config/index';
import SinglePict from '@/components/upload/singlePict';

const fromJson = {
  deliver: '',
  address: '',
  linkman: '',
};
const toJson = {
  deliver: '',
  address: '',
  linkman: '',
};
export default {
  components: {
    SinglePict,
  },
  data () {
    return {
      orderForm: {
        fromList: [{
          uuid: this.uuidv1,
          deliver: '',
          address: '',
          linkman: '',
        }],
        toList: [{
          uuid: this.uuidv1,
          deliver: '',
          address: '',
          linkman: '',
        }]
      },
      priceTradingList: priceTradingTogether,
      deliverSpeed: deliverSpeed,
    }
  },
  computed: {
    uuidv1 () {
      return this.$uuid.v1()
    }
  },
  methods: {
    plusFromItem () {
      this.orderForm.fromList.push(Object.assign({}, fromJson, { uuid: this.uuidv1 }));
    },
    delFromItem (index) {
      this.orderForm.fromList.splice(index, 1)
    },
    plusToItem () {
      this.orderForm.toList.push(Object.assign({}, toJson, { uuid: this.uuidv1 }));
    },
    delToItem (index) {
      this.orderForm.toList.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/style/second.scss';
.edit_box {
  .el-input /deep/ {
    .el-input-group__prepend {
      padding: 0 10px;
    }
  }
  .border {
    position: relative;
    .cont {
      padding: 20px 0 0;
    }
    .line_dashed {
      width: 100%;
      height: 1px;
      background-image: linear-gradient(
        to right,
        #f6f7fa %0,
        #f6f7fa 50%,
        #ffffff 50%
      );
      background-size: 12px 1px;
      background-repeat: repeat-x;
    }
    .lk_icon {
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #ffffff;
      margin-right: 9px;
    }
    .input_group {
      flex: 1;
    }

    .img_upload_box {
      margin-left: 20px;
    }
  }
  .btn_group {
    text-align: center;
    margin: 25px 0 10px;
  }
}
</style>
